<template>
	<view class="container" v-if="isLoaded">
		<!-- 表单 -->
		<view class="content">
			<form class="l-form">
				<view class="l-form-item">
					<view class="l-lbl">类型:</view>
					<view class="l-form-right picker">
						<picker @change="bindPickerChange" :value="'value'" :range="remarkTypeEnum" :range-key="'text'" :disabled="mode == modeEnum.edit">
							<view>{{ remarkTypeEnum.find((item) => item.value == form.type).text }}</view>
						</picker>
					</view>
				</view>

				<view class="l-form-item">
					<view class="l-lbl">内容:</view>
					<view class="l-form-right l-form-input">
						<textarea class="l-textarea" v-model="form.content" :maxlength="50" />
					</view>
				</view>
			</form>
		</view>
		<!-- 编辑模式 -->
		<view class="bottom-btn-group" v-if="mode == modeEnum.edit">
			<view class="btn-del" @click="btnDelClick" size="mini">删除</view>
			<view class="btn-edit" @click="btnEditOrSaveSubmitClick" size="mini">保存</view>
		</view>
		<!-- 新增模式 -->
		<view class="bottom-btn-group" v-else>
			<view
				style="
					flex: 1;
					margin-left: 15px;
					margin-right: 15px;
					display: flex;
					align-items: center;
					justify-content: center;
					height: 49px;
					font-size: 18px;
					background-color: #f3c45d;
					letter-spacing: 3px;
					color: #fff;
					font-weight: bold;
					border-radius: 10px;
				"
				@click="btnEditOrSaveSubmitClick"
				size="mini"
			>
				保存
			</view>
		</view>
	</view>
</template>
<script>
import { GetFoodTagEdit, DelFoodTag, EditFoodTag, AddFoodTag } from '../../../common/api.js';
import { uShowLoading, uHideLoading, uNavigateTo, umodal, utoast, uSetNavigationBarTitle } from '../../../utils/uniUtils.js';
import checker from '../../../common/graceChecker';
import { remarkTypeEnum, modeEnum } from '../../../constants/normalConstants.js';
import { toastIconEnum } from '../../../constants/uiConstants.js';
import { corpId, storeId } from '../../../constants/apiConstants';
export default {
	async onLoad(options) {
		this.mode = options.mode == 'edit' ? 'edit' : 'add';
		this.type = options.type ?? 1;
		uSetNavigationBarTitle(options.mode == 'edit' ? '编辑常用备注' : '新增常用备注');

		if (this.mode == modeEnum.edit) {
			this.id = options.id;
		}
	},

	async mounted() {
		try {
			uShowLoading();
			// 编辑模式
			if (this.mode == modeEnum.edit) {
				await this.getData();
			} else {
				// 新增模式
				this.form = {
					type: this.type,
					content: '',
					corpId: corpId,
					storeId: storeId
				};
			}
		} catch (error) {
			console.log('error', error);
		} finally {
			this.isLoaded = true;
			uHideLoading();
		}
	},
	data() {
		return {
			modeEnum,
			mode: 'add', // 模式
			isLoaded: false,
			type: 1,
			remarkTypeEnum,
			id: null,
			form: null,
			rules: [
				{
					name: 'content',
					checkType: 'endNotNull',
					errorMsg: '内容不能为空~~'
				}
			], //表单校验规则
			lock: false // 节流锁
		};
	},

	methods: {
		async getData() {
			const res = await GetFoodTagEdit(this.id);
			this.form = res.data;
		},
		async insertData() {
			return AddFoodTag(this.form);
		},
		async delData() {
			return await DelFoodTag(this.id);
		},
		async editData() {
			return await EditFoodTag(this.form);
		},

		bindPickerChange(e) {
			this.form.type = this.remarkTypeEnum[e.detail.value].value;
		},
		async btnDelClick() {
			const res = await umodal();
			// 确定删除
			if (res) {
				const result = await this.delData();
				console.log(result);
				if (result.code != null && result.code == 0) {
					await utoast('删除成功！', toastIconEnum.success);
					this.disabled = true;
					setTimeout(() => {
						uNavigateTo('/pages/workbench/remark/list');
					}, 1000);
				} else {
					await utoast('删除失败！', toastIconEnum.error);
				}
			}
		},
		//  编辑或新增
		async btnEditOrSaveSubmitClick() {
			if (this.lock) {
				return;
			}
			if (!(await umodal('确认要提交吗？'))) {
				return;
			}
			// 表单校验
			const isOk = checker.check(this.form, this.rules);
			if (!isOk) {
				await utoast(checker.error, toastIconEnum.none);
				return;
			}

			//  提交表单
			const res = this.mode == modeEnum.edit ? await this.editData(this.form) : await this.insertData(this.form);
			if (res?.code == 0) {
				await utoast('操作成功');
				setTimeout(() => {
					uNavigateTo('/pages/workbench/remark/list');
				}, 1000);
			} else {
				setTimeout(() => {
					this.lock = false;
					console.log('fail', this.lock);
				}, 2000);
			}
		}

		//方法放上面
	}
};
</script>
<style lang="scss" scoped>
@import '~@/static/styles/commonStyle.scss';
.container {
	.content {
		padding: 10px;
		background-color: #fff;
	}
}
</style>
